<!DOCTYPE HTML>
<html lang="zh-cn"
      xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <META HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"/>
    <META HTTP-EQUIV="Expires" CONTENT="0"/>

    <title>Title</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
    <link href="https://cdn.bootcss.com/fullPage.js/2.9.4/jquery.fullpage.min.css" rel="stylesheet" />
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="fullpage">
    <div class="section">
        <img src="../../static/img/back/yuyake.jpg" th:src="'img/back/yuyake.jpg'"/>
    </div>
    <div class="section">
        <img src="../../static/img/back/yoru.jpg" th:src="'img/back/yoru.jpg'"/>
    </div>
    <div id="last_section" class="section"
         style="background-image: url('img/back/hana.jpg');background-size: cover;">
    <!--style="background-image: url('../../static/img/back/yuyake.jpg');background-size: cover;">-->
        <a href="/index" id="button_me" class="btn btn-lg btn-success">进入主页</a>
        <img id="my_logo" src="../../static/img/logo/kobako.png" th:src="'img/logo/kobako.png'" />
    </div>
</div>
</body>
<script>
    $(function () {
        $('#fullpage').fullpage({
            navigation: true
            , verticalCentered: false
            , afterLoad: function (anchorLink, index) {
                if (index == 3) {
                    playAnima()
                }
            }
        });
    });

    function playAnima() {
        $('#button_me').animate({
            opacity : '1',
            top : '35%'
        },1000)

        var kobako = $('#my_logo');
        kobako.animate({
            opacity : '1',
            left : '45%'
        },1000)
    }
</script>
<style>
    img {
        width: 100%;
        height: 100%;
    }

    #button_me {
        position: absolute;
        opacity: 0;
        left: 45%;
        top: 80%;
    }

    #my_logo{
        position: absolute;
        width: 100px;
        height: 100px;
        left: 20%;
        top: 15%;
        opacity: 0;
    }
</style>
</html>